<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon">
    <title>响应式图书网站</title>

    <!-- =============remixicon============== -->
    <link href="https://cdn.bootcdn.net/ajax/libs/remixicon/3.5.0/remixicon.css" rel="stylesheet">

    <!-- ==============swiper8=============== -->
    <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">

    <link rel="stylesheet" href="assets/css/index.css">
</head>
<body>
    <!-- header -->
    <header class="header" id="header">
        <nav class="nav container">
            <a href="#" class="nav__logo">
                <i class="ri-book-3-line"></i>电子书
            </a>
            <div class="nav__menu">
                <ul class="nav__list">
                    <li class="nav__item">
                        <a href="#home" class="nav__link active-link">
                            <i class="ri-home-line"></i>
                            <span>首页</span>
                        </a>
                    </li>

                    <li class="nav__item">
                        <a href="#featured" class="nav__link">
                            <i class="ri-book-3-line"></i>
                            <span>特色</span>
                        </a>
                    </li>

                    <li class="nav__item">
                        <a href="#discount" class="nav__link">
                            <i class="ri-price-tag-3-line"></i>
                            <span>折扣</span>
                        </a>
                    </li>

                    <li class="nav__item">
                        <a href="#new" class="nav__link">
                            <i class="ri-bookmark-line"></i>
                            <span>新书</span>
                        </a>
                    </li>
                    <li class="nav__item">
                        <a href="#testimonial" class="nav__link">
                            <i class="ri-message-3-line"></i>
                            <span>推荐</span>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="nav__actions">
                <!-- 搜索按钮 -->
                <i class="ri-search-line search-button" id="search-button"></i>

                 <!-- 登录按钮 -->
                 <i class="ri-user-line login-button" id="login-button"></i>

                  <!-- 主题按钮 -->
                <i class="ri-moon-line change-theme-button" id="theme-button"></i>
            </div>
        </nav>
    </header>

    <!-- ==============search=========== -->
    <div class="search" id="search-content">
        <form action="" class="search__form">
            <i class="ri-search-line search__icon"></i>
            <input class="search__input" placeholder="你要查找什么？" type="search">
        </form>
        <i class="ri-close-line search__close" id="search-close"></i>
    </div>

    <!-- =============login========= -->
    <div class="login grid" id="login-content">
        <form action="" class="login__form grid">
            <h3 class="login__title">登 录</h3>
            <div class="login__group grid">
                <div>
                    <label for="login-email" class="login__label">邮箱</label>
                    <input class="login__input" type="email" placeholder="输入你的邮箱" id="login-email">
                </div>
                <div>
                    <label for="login-pass" class="login__label">密码</label>
                    <input class="login__input" type="password" placeholder="输入你的密码" id="login-pass">
                </div>
               
            </div>
            <div>
                <span class="login__signup">
                    你有账号吗？<a href="#">注册</a>
                </span>
                <a href="#" class="login__forget">忘记密码</a>
                <button type="submit" class="login__button button">登 录</button>
            </div>
        </form>
        <i class="ri-close-line login__close" id="login-close"></i>
    </div>

    <!-- =========main======== -->
    <main class="main">
        <!-- =====home===== -->
        <section class="home section" id="home">
            <div class="home__container container grid">
                <div class="home__data">
                    <h1 class="home__title">
                        浏览器 & <br>
                        选择电子书
                    </h1>
                    <p class="home__description">
                        从你最喜欢的作者中找到最好的电子书，在各种类目中探索成千上万
                        本电子书，优先50%折扣价
                    </p>
                    <a href="#" class="button">开始探索</a>
                </div>
                <div class="home__images">
                    <div class="home__swiper swiper">
                        <div class="swiper-wrapper">
                            <article class="home__article swiper-slide">
                                <img class="home__img" src="assets/img/home-book-1.png" alt="img">
                            </article>

                            <article class="home__article swiper-slide">
                                <img class="home__img" src="assets/img/home-book-2.png" alt="img">
                            </article>

                            <article class="home__article swiper-slide">
                                <img class="home__img" src="assets/img/home-book-3.png" alt="img">
                            </article>

                            <article class="home__article swiper-slide">
                                <img class="home__img" src="assets/img/home-book-4.png" alt="img">
                            </article>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- =====services====== -->
        <section class="services section">
            <div class="services__container container grid">
                <article class="services__card">
                    <i class="ri-truck-line"></i>
                    <h3 class="services__title">免邮费</h3>
                    <p class="services__description">订单额大于100元</p>
                </article>

                <article class="services__card">
                    <i class="ri-lock-2-line"></i>
                    <h3 class="services__title">安全支付</h3>
                    <p class="services__description">100%安全支付</p>
                </article>

                <article class="services__card">
                    <i class="ri-customer-service-2-line"></i>
                    <h3 class="services__title">24/7 支持</h3>
                    <p class="services__description">随时联系我们</p>
                </article>
            </div>
        </section>

        <!-- ========featured========== -->
        <section class="featured section" id="featured">
            <h2 class="section__title">特色书籍</h2>
            <div class="feature__container container">
                <div class="featured__swiper swiper">
                    <div class="swiper-wrapper">
                        <article class="featured__card swiper-slide">
                            <img src="assets/img/featured-book-1.png" alt="image" class="featured__img">
                            
                            <h2 class="featured__title">特色书籍</h2>
                            <div class="featured__prices">
                                <span class="featured__discount">￥11.99</span>
                                <span class="featured__price">￥19.99</span>
                            </div>
                            <button class="button">添加到购物车</button>
                            <div class="featured__actions">
                                <button><i class="ri-search-line"></i></button>
                                <button><i class="ri-heart-3-line"></i></button>
                                <button><i class="ri-eye-line"></i></button>
                            </div>
                        </article>
                        
                        <article class="featured__card swiper-slide">
                            <img src="assets/img/featured-book-2.png" alt="image" class="featured__img">
                            
                            <h2 class="featured__title">特色书籍</h2>
                            <div class="featured__prices">
                                <span class="featured__discount">￥11.99</span>
                                <span class="featured__price">￥19.99</span>
                            </div>
                            <button class="button">添加到购物车</button>
                            <div class="featured__actions">
                                <button><i class="ri-search-line"></i></button>
                                <button><i class="ri-heart-3-line"></i></button>
                                <button><i class="ri-eye-line"></i></button>
                            </div>
                        </article>
                        
                        <article class="featured__card swiper-slide">
                            <img src="assets/img/featured-book-3.png" alt="image" class="featured__img">
                            
                            <h2 class="featured__title">特色书籍</h2>
                            <div class="featured__prices">
                                <span class="featured__discount">￥11.99</span>
                                <span class="featured__price">￥19.99</span>
                            </div>
                            <button class="button">添加到购物车</button>
                            <div class="featured__actions">
                                <button><i class="ri-search-line"></i></button>
                                <button><i class="ri-heart-3-line"></i></button>
                                <button><i class="ri-eye-line"></i></button>
                            </div>
                        </article>
                        
                        <article class="featured__card swiper-slide">
                            <img src="assets/img/featured-book-4.png" alt="image" class="featured__img">
                            
                            <h2 class="featured__title">特色书籍</h2>
                            <div class="featured__prices">
                                <span class="featured__discount">￥11.99</span>
                                <span class="featured__price">￥19.99</span>
                            </div>
                            <button class="button">添加到购物车</button>
                            <div class="featured__actions">
                                <button><i class="ri-search-line"></i></button>
                                <button><i class="ri-heart-3-line"></i></button>
                                <button><i class="ri-eye-line"></i></button>
                            </div>
                        </article>
                    </div>

                    <div class="swiper-button-prev">
                        <i class="ri-arrow-drop-left-line"></i>
                    </div>
                    <div class="swiper-button-next">
                        <i class="ri-arrow-drop-right-line"></i>
                    </div>
                </div>
            </div>
        </section>

        <!-- ========discount=========== -->
        <section class="discount section" id="discount">
            <h2 class="discount__title section__title">
                50%折扣
            </h2>
            <div class="discount__container container grid">
                <div class="discount__data">            
                    <p class="discount__description">
                        从你最喜欢的作者中找到最好的电子书，你买的越多，
                        你获得的折扣越大
                    </p>
                    <a href="#" class="button">马上购买</a>
                </div>
                <div class="discount__images">
                    <img src="assets/img/discount-book-1.png" alt="image" class="discount__img-1">
                    <img src="assets/img/discount-book-2.png" alt="image" class="discount__img-2">
                    
                </div>
            </div>
        </section>

        <!-- =========new=========== -->
        <section class="new section" id="new">
            <h2 class="section__title">
                新书
            </h2>

            <div class="new__container container">
                <div class="new__swiper swiper">
                    <div class="swiper-wrapper">
                        <a href="#" class="new__card swiper-slide">
                            <img src="assets/img/home-book-1.png" alt="image" class="new__img">
                            <div>
                                <h2 class="new__title">
                                    新书
                                </h2>
                                <div class="new__prices">
                                    <span class="new__discount">
                                        ￥7.9
                                    </span>
                                    <span class="new__price">￥14.9</span>
                                </div>
                                <div class="new__stars">
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    
                                    <i class="ri-star-half-fill"></i>

                                </div>
                            </div>
                        </a>
                        <a href="#" class="new__card swiper-slide">
                            <img src="assets/img/book-1.png" alt="image" class="new__img">
                            <div>
                                <h2 class="new__title">
                                    新书
                                </h2>
                                <div class="new__prices">
                                    <span class="new__discount">
                                        ￥7.9
                                    </span>
                                    <span class="new__price">￥14.9</span>
                                </div>
                                <div class="new__stars">
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    
                                    <i class="ri-star-half-fill"></i>

                                </div>
                            </div>
                        </a>
                        <a href="#" class="new__card swiper-slide">
                            <img src="assets/img/book-2.png" alt="image" class="new__img">
                            <div>
                                <h2 class="new__title">
                                    新书
                                </h2>
                                <div class="new__prices">
                                    <span class="new__discount">
                                        ￥7.9
                                    </span>
                                    <span class="new__price">￥14.9</span>
                                </div>
                                <div class="new__stars">
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    
                                    <i class="ri-star-half-fill"></i>

                                </div>
                            </div>
                        </a>
                        <a href="#" class="new__card swiper-slide">
                            <img src="assets/img/book-3.png" alt="image" class="new__img">
                            <div>
                                <h2 class="new__title">
                                    新书
                                </h2>
                                <div class="new__prices">
                                    <span class="new__discount">
                                        ￥7.9
                                    </span>
                                    <span class="new__price">￥14.9</span>
                                </div>
                                <div class="new__stars">
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>                                    
                                    <i class="ri-star-half-fill"></i>

                                </div>
                            </div>
                        </a>
                        <a href="#" class="new__card swiper-slide">
                            <img src="assets/img/book-4.png" alt="image" class="new__img">
                            <div>
                                <h2 class="new__title">
                                    新书
                                </h2>
                                <div class="new__prices">
                                    <span class="new__discount">
                                        ￥7.9
                                    </span>
                                    <span class="new__price">￥14.9</span>
                                </div>
                                <div class="new__stars">
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    
                                    <i class="ri-star-half-fill"></i>

                                </div>
                            </div>
                        </a>
                        <a href="#" class="new__card swiper-slide">
                            <img src="assets/img/book-1.png" alt="image" class="new__img">
                            <div>
                                <h2 class="new__title">
                                    新书
                                </h2>
                                <div class="new__prices">
                                    <span class="new__discount">
                                        ￥7.9
                                    </span>
                                    <span class="new__price">￥14.9</span>
                                </div>
                                <div class="new__stars">
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    
                                    <i class="ri-star-half-fill"></i>

                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                
                <div class="new__swiper swiper">
                    <div class="swiper-wrapper">
                        <a href="#" class="new__card swiper-slide">
                            <img src="assets/img/home-book-1.png" alt="image" class="new__img">
                            <div>
                                <h2 class="new__title">
                                    新书
                                </h2>
                                <div class="new__prices">
                                    <span class="new__discount">
                                        ￥7.9
                                    </span>
                                    <span class="new__price">￥14.9</span>
                                </div>
                                <div class="new__stars">
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    
                                    <i class="ri-star-half-fill"></i>

                                </div>
                            </div>
                        </a>
                        <a href="#" class="new__card swiper-slide">
                            <img src="assets/img/book-1.png" alt="image" class="new__img">
                            <div>
                                <h2 class="new__title">
                                    新书
                                </h2>
                                <div class="new__prices">
                                    <span class="new__discount">
                                        ￥7.9
                                    </span>
                                    <span class="new__price">￥14.9</span>
                                </div>
                                <div class="new__stars">
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    
                                    <i class="ri-star-half-fill"></i>

                                </div>
                            </div>
                        </a>
                        <a href="#" class="new__card swiper-slide">
                            <img src="assets/img/book-2.png" alt="image" class="new__img">
                            <div>
                                <h2 class="new__title">
                                    新书
                                </h2>
                                <div class="new__prices">
                                    <span class="new__discount">
                                        ￥7.9
                                    </span>
                                    <span class="new__price">￥14.9</span>
                                </div>
                                <div class="new__stars">
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    
                                    <i class="ri-star-half-fill"></i>

                                </div>
                            </div>
                        </a>
                        <a href="#" class="new__card swiper-slide">
                            <img src="assets/img/book-3.png" alt="image" class="new__img">
                            <div>
                                <h2 class="new__title">
                                    新书
                                </h2>
                                <div class="new__prices">
                                    <span class="new__discount">
                                        ￥7.9
                                    </span>
                                    <span class="new__price">￥14.9</span>
                                </div>
                                <div class="new__stars">
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>                                    
                                    <i class="ri-star-half-fill"></i>

                                </div>
                            </div>
                        </a>
                        <a href="#" class="new__card swiper-slide">
                            <img src="assets/img/book-4.png" alt="image" class="new__img">
                            <div>
                                <h2 class="new__title">
                                    新书
                                </h2>
                                <div class="new__prices">
                                    <span class="new__discount">
                                        ￥7.9
                                    </span>
                                    <span class="new__price">￥14.9</span>
                                </div>
                                <div class="new__stars">
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    
                                    <i class="ri-star-half-fill"></i>

                                </div>
                            </div>
                        </a>
                        <a href="#" class="new__card swiper-slide">
                            <img src="assets/img/book-1.png" alt="image" class="new__img">
                            <div>
                                <h2 class="new__title">
                                    新书
                                </h2>
                                <div class="new__prices">
                                    <span class="new__discount">
                                        ￥7.9
                                    </span>
                                    <span class="new__price">￥14.9</span>
                                </div>
                                <div class="new__stars">
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    
                                    <i class="ri-star-half-fill"></i>

                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- ==========join======== -->
        <section class="join section">
            <div class="join__container">
                <img src="assets/img/join-bg.jpg" alt="image" class="join__bg">

                <div class="join__data container grid">
                    <h2 class="join__title section__title">
                        接受订阅<br>
                        最新更新
                    </h2>

                    <form action="" class="join__form">
                        <input type="email" placeholder="输入你的邮箱" class="join__input">
                        <button type="submit" class="join__button button">订阅</button>
                    </form>
                </div>
            </div>
        </section>

        <!-- ========testimonial===== -->
        <section class="testimonial section" id="testimonial">
           <h2 class="section__title">客户意见</h2>
            <div class="testimonial__container container">
                <div class="testimonial__swiper swiper">
                    <div class="swiper-wrapper">
                        <div class="testimonial__card swiper-slide">
                            <img src="assets/img/testimonial-perfil-1.jpg" alt="image" class="testimonial__img">
                            <h2 class="testimonial__title">李然</h2>
                            <p class="testimonial__description">
                                这是个买书的最好的网站，购买非常方便并且有
                                很大的折扣
                            </p>
                            <div class="testimonial__stars">
                                <i class="ri-star-fill"></i>
                                <i class="ri-star-fill"></i>
                                <i class="ri-star-fill"></i>
                                <i class="ri-star-fill"></i>
                                
                                <i class="ri-star-half-fill"></i>

                            </div>
                        </div>

                        <div class="testimonial__card swiper-slide">
                            <img src="assets/img/testimonial-perfil-1.jpg" alt="image" class="testimonial__img">
                            <h2 class="testimonial__title">李然</h2>
                            <p class="testimonial__description">
                                这是个买书的最好的网站，购买非常方便并且有
                                很大的折扣
                            </p>
                            <div class="testimonial__stars">
                                <i class="ri-star-fill"></i>
                                <i class="ri-star-fill"></i>
                                <i class="ri-star-fill"></i>
                                <i class="ri-star-fill"></i>
                                
                                <i class="ri-star-half-fill"></i>

                            </div>
                        </div>

                        <div class="testimonial__card swiper-slide">
                            <img src="assets/img/testimonial-perfil-1.jpg" alt="image" class="testimonial__img">
                            <h2 class="testimonial__title">李然</h2>
                            <p class="testimonial__description">
                                这是个买书的最好的网站，购买非常方便并且有
                                很大的折扣
                            </p>
                            <div class="testimonial__stars">
                                <i class="ri-star-fill"></i>
                                <i class="ri-star-fill"></i>
                                <i class="ri-star-fill"></i>
                                <i class="ri-star-fill"></i>
                                
                                <i class="ri-star-half-fill"></i>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>


    <!-- =========footer========= -->
    <footer class="footer">
        <div class="footer__container container grid">
            <div>
                <a href="#" class="footer__logo">
                    <i class="ri-book-3-line"></i>电子书
                </a>
                <p class="footer__decription">
                    从你最喜欢的作者中<br>
                    查找并探索最好的电<br>
                    子书
                </p>
            </div>
            <div class="footer__data grid">
                <div>
                    <h3 class="footer__title">
                        关于
                    </h3>
                    <ul class="footer__links">
                        <li>
                            <a href="#" class="footer__link">奖品</a>
                        </li>

                        <li>
                            <a href="#" class="footer__link">问答</a>
                        </li>

                        <li>
                            <a href="#" class="footer__link">隐私政策</a>
                        </li>

                        <li>
                            <a href="#" class="footer__link">服务条款</a>
                        </li>
                    </ul>
                </div>

                <div>
                    <h3 class="footer__title">
                        公司
                    </h3>
                    <ul class="footer__links">
                        <li>
                            <a href="#" class="footer__link">博客</a>
                        </li>

                        <li>
                            <a href="#" class="footer__link">社区</a>
                        </li>

                        <li>
                            <a href="#" class="footer__link">我们的团队</a>
                        </li>

                        <li>
                            <a href="#" class="footer__link">帮助中心</a>
                        </li>
                    </ul>
                </div>

                <div>
                    <h3 class="footer__title">
                        联系
                    </h3>
                    <ul class="footer__links">
                        <li>
                            <address class="footer__info">
                                中国,福建省<br>
                                厦门,湖里区，殿前街道，458号
                            </address>
                        </li>

                        <li>
                            <address class="footer__info">
                                e.book@email.com<br>
                                0980-878-456
                            </address>
                        </li>

                    
                    </ul>
                </div>

                <div>
                    <h3 class="footer__title">
                        社交媒体
                    </h3>
                    <div class="footer__social">
                        <a href="#" target="_blank" class="footer__social-link">
                            <i class="ri-qq-fill"></i>
                        </a>

                        <a href="#" target="_blank" class="footer__social-link">
                            <i class="ri-wechat-fill"></i>
                        </a>

                        <!-- <a href="#" target="_blank" class="footer__social-link">
                            <i class="ri-tiktok-fill"></i>
                        </a> -->
                        <a href="#" target="_blank" class="footer__social-link">
                            <i class="ri-weibo-fill"></i>
                        </a>
                        
                    </div>
                </div>
            </div>
        </div>
        <span class="footer__copy">
            &#169;版权归E-book所有
        </span>
    </footer>

    <a href="#" class="scrollup" id="scroll-up">
        <i class="ri-arrow-up-line"></i>
    </a>

    <!-- <div id="test1" style="height: 200px;"></div> -->
    <script src="assets/js/swiper-bundle.min.js"></script>
    <script src="assets/js/index.js"></script>
</body>
</html>